{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:#ffffff;
    }
{#    #map{#}
{#        width:100%;#}
{#        height:100%;#}
{#        top:20%;#}
{#        left:20%;#}
{#    }#}
    #panel {
        position: absolute;
        top:30px;
        left:10px;
        z-index: 999;
        color: #fff;
    }
    #login{
        position:absolute;
        width:300px;
        height:40px;
        left:50%;
        top:50%;
        margin:-40px 0 0 -150px;
    }
    #login input[type=password]{
        width:200px;
        height:30px;
        padding:3px;
        line-height:30px;
        border:1px solid #000;
    }
    #login input[type=submit]{
        width:80px;
        height:38px;
        display:inline-block;
        line-height:38px;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=krejNXU0gOAVoRnoGTDczzDrvryBXnmM"></script>


{#  没有需要加载的文件#}
 {% endblock %}

{% block display1 %}
    "display: block"
{% endblock %}

{% block active1 %}
    'active'
{% endblock %}

{% block active_sub_taxi_all_show %}
    'active'
{% endblock %}

{% block main %}
{#   <div class='span12'>#}
{#        <div class='page-header'>#}
{#            <h1 class='pull-left'>#}
{#                <i class='icon-edit'></i>#}
{#                <span>数据源展示</span>#}
{#            </h1>#}
{#            <div class='pull-right'>#}
{#                <ul class='breadcrumb'>#}
{#                    <li>#}
{#                        <a href="/index"><i class='icon-bar-chart'></i>#}
{#                        </a>#}
{#                    </li>#}
{#                    <li class='separator'>#}
{#                        <i class='icon-angle-right'></i>#}
{#                    </li>#}
{#                    <li>#}
{#                        数据源统计#}
{#                    </li>#}
{#                    <li class='separator'>#}
{#                        <i class='icon-angle-right'></i>#}
{#                    </li>#}
{#                    <li class='active'>货运数据源</li>#}
{#                </ul>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}

{#  	<div id="r-result">#}
{#		<input type="button"  onclick="openjyj();" value="jyj"/>#}
{#        <input type="button"  onclick="closeall();" value="关闭全部"/>#}
{#	</div>#}


<div id="map" style="width: 1200px;height:800px;"></div>
    <script type="text/javascript">
    var map = new BMap.Map("map", {});                        // 创建Map实例

        map.centerAndZoom(new BMap.Point(113.531398,32.897445), 6);     // 初始化地图,设置中心点坐标和地图级别

    map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));// 左上角，添加比例尺

    map.enableScrollWheelZoom();                        //启用滚轮放大缩小
    map.addControl(new BMap.MapTypeControl());
    map.disable3DBuilding();

    map.addControl(new BMap.CityListControl({   //城市列表
    anchor: BMAP_ANCHOR_TOP_LEFT
{#    offset: size,#}
    // 切换城市之间事件
    // onChangeBefore: function(){
    //    alert('before');
    // },
    // 切换城市之后事件
    // onChangeAfter:function(){
    //   alert('after');
    // }
}));







    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
{#        var points = [];  // 添加海量点数据#}
{#        {% for i in list_huoyun %}#}
{#        points.push(new BMap.Point{{ i }});#}
{#        {% endfor %}#}

{#        var options = {#}
{#            size: BMAP_POINT_SIZE_TINY,#}
{#            shape: BMAP_POINT_SHAPE_CIRCLE,#}
{#            color: '#ff0000'#}
{#        }#}
{#        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection#}

{#        var points_keyun=[];#}
{#        {% for i in list_keyun %}#}
{#        points_keyun.push(new BMap.Point{{ i }});#}
{#        {% endfor %}#}
{##}
{#        var options_keyun = {#}
{#            size: BMAP_POINT_SIZE_TINY,#}
{#            shape: BMAP_POINT_SHAPE_CIRCLE,#}
{#            color: '#0064ff'#}
{#        }#}
{#        var pointCollection_keyun = new BMap.PointCollection(points_keyun, options_keyun);  // 初始化PointCollection#}


         var points_taxi = [];  // 添加海量点数据
        {% for i in list_taxi %}
        points_taxi.push(new BMap.Point{{ i }});
        {% endfor %}

        var options_taxi = {
            size: BMAP_POINT_SIZE_TINY,
            shape: BMAP_POINT_SHAPE_CIRCLE,
            color: '#ff0000'
        }
        var pointCollection_taxi = new BMap.PointCollection(points_taxi, options_taxi);  // 初始化PointCollection




{#        map.addOverlay(pointCollection);  // 添加Overlay#}

{#        map.addOverlay(pointCollection_keyun);#}
{##}
        map.addOverlay(pointCollection_taxi);
{##}

    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }

// 定义一个控件类,即function 关闭显示
	function ZoomControl(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
	  this.defaultOffset = new BMap.Size(10, 35);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
{#	ZoomControl.prototype.initialize = function(map){#}
{#	  // 创建一个DOM元素#}
{#	  var close = document.createElement("close");#}
{#	  // 添加文字说明#}
{#	  close.appendChild(document.createTextNode(" 关闭显示 "));#}
{#	  // 设置样式#}
{#	  close.style.cursor = "pointer";#}
{#	  close.style.border = "1px solid gray";#}
{#	  close.style.backgroundColor = "white";#}
{#	  // 绑定事件,点击一次放大两级#}
{#	  close.onclick = function(e){#}
{#		closeall();#}
{#	  }#}
{#	  // 添加DOM元素到地图中#}
{#	  map.getContainer().appendChild(close);#}
{#	  // 将DOM元素返回#}
{#	  return close;#}
{#	}#}
	// 创建控件
{#	var myZoomCtrl = new ZoomControl();#}
{#	// 添加到地图当中#}
{#	map.addControl(myZoomCtrl);#}
{##}
{#// 定义一个控件类,即function 显示行业数据1-货运#}
{#	function ZoomControl_show1(){#}
{#	  // 默认停靠位置和偏移量#}
{#	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;#}
{#	  this.defaultOffset = new BMap.Size(10, 65);#}
{#	}#}
{##}
{#	// 通过JavaScript的prototype属性继承于BMap.Control#}
{#	ZoomControl_show1.prototype = new BMap.Control();#}
{##}
{#	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回#}
{#	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中#}
{#	ZoomControl_show1.prototype.initialize = function(map){#}
{#	  // 创建一个DOM元素#}
{#	  var show1 = document.createElement("show1");#}
{#	  // 添加文字说明#}
{#	  show1.appendChild(document.createTextNode(" 行业数据1 "));#}
{#	  // 设置样式#}
{#	  show1.style.cursor = "pointer";#}
{#	  show1.style.border = "1px solid gray";#}
{#	  show1.style.backgroundColor = "white";#}
{#	  // 绑定事件,点击一次放大两级#}
{#	  show1.onclick = function(e){#}
{#		openhuoyun();#}
{#	  }#}
{#	  // 添加DOM元素到地图中#}
{#	  map.getContainer().appendChild(show1);#}
{#	  // 将DOM元素返回#}
{#	  return show1;#}
{#	}#}
{#	// 创建控件#}
{#	var myZoomCtrl_show1 = new ZoomControl_show1();#}
{#	// 添加到地图当中#}
{#	map.addControl(myZoomCtrl_show1);#}
{##}
{#// 定义一个控件类,即function 显示行业数据2-出租车#}
{#	function ZoomControl_show2(){#}
{#	  // 默认停靠位置和偏移量#}
{#	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;#}
{#	  this.defaultOffset = new BMap.Size(10, 95);#}
{#	}#}
{##}
{#	// 通过JavaScript的prototype属性继承于BMap.Control#}
{#	ZoomControl_show2.prototype = new BMap.Control();#}
{##}
{#	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回#}
{#	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中#}
{#	ZoomControl_show2.prototype.initialize = function(map){#}
{#	  // 创建一个DOM元素#}
{#	  var show2 = document.createElement("show2");#}
{#	  // 添加文字说明#}
{#	  show2.appendChild(document.createTextNode(" 行业数据2 "));#}
{#	  // 设置样式#}
{#	  show2.style.cursor = "pointer";#}
{#	  show2.style.border = "1px solid gray";#}
{#	  show2.style.backgroundColor = "white";#}
{#	  // 绑定事件#}
{#	  show2.onclick = function(e){#}
{#		opentaxi();#}
{#	  }#}
{#	  // 添加DOM元素到地图中#}
{#	  map.getContainer().appendChild(show2);#}
{#	  // 将DOM元素返回#}
{#	  return show2;#}
{#	}#}
{#	// 创建控件#}
{#	var myZoomCtrl_show2 = new ZoomControl_show2();#}
{#	// 添加到地图当中#}
{#	map.addControl(myZoomCtrl_show2);#}
{##}
{#	function ZoomControl_show2(){#}
{#	  // 默认停靠位置和偏移量#}
{#	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;#}
{#	  this.defaultOffset = new BMap.Size(10, 95);#}
{#	}#}
{##}
{#	// 通过JavaScript的prototype属性继承于BMap.Control#}
{#	ZoomControl_show2.prototype = new BMap.Control();#}
{##}
{#	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回#}
{#	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中#}
{#	ZoomControl_show2.prototype.initialize = function(map){#}
{#	  // 创建一个DOM元素#}
{#	  var show2 = document.createElement("show2");#}
{#	  // 添加文字说明#}
{#	  show2.appendChild(document.createTextNode(" 行业数据2 "));#}
{#	  // 设置样式#}
{#	  show2.style.cursor = "pointer";#}
{#	  show2.style.border = "1px solid gray";#}
{#	  show2.style.backgroundColor = "white";#}
{#	  // 绑定事件#}
{#	  show2.onclick = function(e){#}
{#		openkeyun();#}
{#	  }#}
{#	  // 添加DOM元素到地图中#}
{#	  map.getContainer().appendChild(show2);#}
{#	  // 将DOM元素返回#}
{#	  return show2;#}
{#	}#}
{#	// 创建控件#}
{#	var myZoomCtrl_show2 = new ZoomControl_show2();#}
{#	// 添加到地图当中#}
{#	map.addControl(myZoomCtrl_show2);#}
{##}
{##}
{##}
{##}
{#    function ZoomControl_show3(){#}
{#	  // 默认停靠位置和偏移量#}
{#	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;#}
{#	  this.defaultOffset = new BMap.Size(10, 125);#}
{#	}#}
{##}
{#	// 通过JavaScript的prototype属性继承于BMap.Control#}
{#	ZoomControl_show3.prototype = new BMap.Control();#}
{##}
{#	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回#}
{#	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中#}
{#	ZoomControl_show3.prototype.initialize = function(map){#}
{#	  // 创建一个DOM元素#}
{#	  var show3 = document.createElement("show3");#}
{#	  // 添加文字说明#}
{#	  show3.appendChild(document.createTextNode(" 行业数据3 "));#}
{#	  // 设置样式#}
{#	  show3.style.cursor = "pointer";#}
{#	  show3.style.border = "1px solid gray";#}
{#	  show3.style.backgroundColor = "white";#}
{#	  // 绑定事件#}
{#	  show3.onclick = function(e){#}
{#		opentaxi();#}
{#	  }#}
{#	  // 添加DOM元素到地图中#}
{#	  map.getContainer().appendChild(show3);#}
{#	  // 将DOM元素返回#}
{#	  return show3;#}
{#	}#}
{#	// 创建控件#}
{#	var myZoomCtrl_show3 = new ZoomControl_show3();#}
{#	// 添加到地图当中#}
{#	map.addControl(myZoomCtrl_show3);#}
{##}
{#        function openhuoyun(){#}
{#            pointCollection.show();#}
{#        }#}
{#        function openkeyun(){#}
{#            pointCollection_keyun.show();#}
{#        }#}
{#        function opentaxi(){#}
{#            pointCollection_taxi.show();#}
{#        }#}
{#        function closeall(){#}
{#             pointCollection.show();#}
{#             pointCollection.hide();#}
{#             pointCollection_taxi.hide();#}
{#             pointCollection_keyun.hide();#}
{#        }#}
  </script>
{% endblock %}
{% block script %}
    <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
{% endblock %}